<template>
  <div class="pinghengbiao">
    <!-- 11 -->
    <div class="balanceEcharts" id="balanceEcharts"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      aaa: [],
      bbb: [],
      ccc: []
    }
  },
  props: {
    echartsData: {
      type: Array,
      required: true
    }
  },
  watch: {
    echartsData: {
      handler (newVal, oldVal) {
        // console.log('newVal终于出来了电压电阻', newVal, oldVal)
        if (newVal !== undefined) {
          this.aaa = []
          this.bbb = []
          this.ccc = []
          this.initEcharts(newVal)
        }
      }
    }
  },
  computed: {},
  created () { },
  mounted () {
  },
  methods: {
    initEcharts (e) {
      // e.reverse()
      // e.sort((a, b) => {
      //   return a - b
      // })
      console.log(e)
      // const aaa = []
      e.forEach((item, index) => {
        if (item.whatModel === '总支数') {
          item.value.forEach((item1, index) => {
            this.bbb.push([item1.x, item1.y, item1.number, item1.anyWeight.toFixed(3)])
          })
        } else {
          this.ccc.push([item.x, item.y, item.numbers, item.anyWeights.toFixed(3)])
          item.value.forEach((item1, index) => {
            // console.log(item1)
            this.aaa.push([item1.x, item1.y, item1.number, item1.anyWeight.toFixed(3)])
          })
        }
      })
      var data1 = JSON.parse(JSON.stringify(this.aaa))
      var data2 = JSON.parse(JSON.stringify(this.ccc))
      var data3 = JSON.parse(JSON.stringify(this.bbb))
      console.log(data1, data2, data3)
      var mycharts = this.$echarts.init(document.getElementById('balanceEcharts'))
      var x = []
      var y = []
      console.log(e[0].value.length)
      for (let i = 0; i < e.length - 1; i++) {
        y.push(i)
      }
      for (let i = 0; i < e[0].value.length; i++) {
        x.push(i)
      }
      console.log(x)
      console.log(y)
      var xData = 0
      var yData = 0
      if (e[0].value.length > 10) {
        xData = parseInt((10 / e[0].value.length) * 100)
      } else {
        xData = 100
      }
      if (e.length > 20) {
        yData = parseInt((20 / e.length) * 100)
      } else {
        yData = 100
      }
      var data = []
      var min = Infinity
      var max = -Infinity
      var total = 0

      for (let i = 0; i < x.length; i++) {
        for (let j = 0; j < y.length; j++) {
          const v = Math.trunc(Math.random() * 1e3)
          if (v < min) {
            min = v
          }
          if (v > max) {
            max = v
          }
          data.push([i, j, v])
          total += v
        }
      }

      var option = {
        tooltip: {},
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: [
          {
            containLabel: false,
            top: '15%',
            right: '20%',
            bottom: '10%',
            left: '5%'
          },
          {
            containLabel: false,
            top: '15%',
            right: '5%',
            bottom: '10%',
            left: '85%'
          },
          {
            containLabel: false,
            top: '5%',
            right: '20%',
            bottom: '90%',
            left: '5%'
          }
        ],
        xAxis: [
          {
            type: 'category',
            name: '到站次数(F)',
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
              align: 'center',
              verticalAlign: 'top',
              padding: [14, 0, 0, 0],
              color: '#444'
            },
            data: x,
            axisLabel: {
              margin: 14,
              color: '#666'
            },
            splitArea: {
              show: true
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'category',
            gridIndex: 1,
            position: 'top',
            data: ['行合计'],
            axisLabel: {
              margin: 14,
              color: '#666'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'category',
            gridIndex: 2,
            show: false
          }
        ],
        yAxis: [
          {
            type: 'category',
            name: '最新到站(R)',
            gridIndex: 0,
            nameGap: 0,
            nameTextStyle: {
              align: 'right',
              verticalAlign: 'bottom',
              padding: [0, 14, 0, 0],
              color: '#444'
            },
            data: y,
            axisLabel: {
              margin: 14,
              color: '#666'
            },
            splitArea: {
              show: true
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: 'category',
            gridIndex: 1,
            show: false
          },
          {
            type: 'category',
            gridIndex: 2,
            data: ['列合计'],
            axisLabel: {
              margin: 14,
              color: '#666'
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        visualMap: [
          {
            min: 0,
            max: max,
            seriesIndex: 0,
            padding: 0,
            calculable: true,
            orient: 'horizontal',
            inverse: true,
            top: '5%',
            right: '6%',
            itemWidth: 18,
            itemHeight: 114,
            inRange: {
              color: ['#99d7ff', '#007bcb'],
              symbolSize: [100, 100]
            },
            text: ['高', '低'],
            textGap: 8,
            textStyle: {
              color: '#666'
            }
          }
        ],
        dataZoom: [
          {
            type: 'slider',
            show: true,
            zoomOnMouseWheel: false,
            xAxisIndex: [0, 2],
            zoomLock: true,
            start: 0,
            end: xData
            // handleColor: '#ddd', // h滑动图标的颜色
            // showDetail: false, // 是否显示detail 文字
            // handleStyle: {
            //   borderColor: '#cacaca',
            //   borderWidth: '1',
            //   shadowBlur: 2,
            //   background: '#ddd',
            //   shadowColor: '#ddd'
            // }
          },
          {
            type: 'slider',
            show: true,
            zoomOnMouseWheel: false,
            zoomLock: true,
            yAxisIndex: [0, 1],
            left: '82%',
            start: 0,
            end: yData
          },
          {
            type: 'inside',
            xAxisIndex: 0,
            zoomOnMouseWheel: false,
            start: 1,
            end: 100
          },
          {
            type: 'inside',
            yAxisIndex: 0,
            zoomOnMouseWheel: false,
            start: 1,
            end: 100
          }
          // {
          //   type: 'slider',
          //   show: true,
          //   xAxisIndex: 1,
          //   start: 0,
          //   end: xData
          // },
          // {
          //   type: 'slider',
          //   show: true,
          //   yAxisIndex: 1,
          //   left: '93%',
          //   start: 0,
          //   end: yData
          // },
          // {
          //   type: 'inside',
          //   xAxisIndex: 1,
          //   start: 1,
          //   end: 100
          // },
          // {
          //   type: 'inside',
          //   yAxisIndex: 1,
          //   start: 1,
          //   end: 100
          // }
          // {
          //   type: 'slider',
          //   show: true,
          //   xAxisIndex: 2,
          //   start: 0,
          //   end: xData
          // },
          // {
          //   type: 'slider',
          //   show: true,
          //   yAxisIndex: 2,
          //   left: '93%',
          //   start: 0,
          //   end: yData
          // },
          // {
          //   type: 'inside',
          //   xAxisIndex: 2,
          //   start: 1,
          //   end: 100
          // },
          // {
          //   type: 'inside',
          //   yAxisIndex: 2,
          //   start: 1,
          //   end: 100
          // }
        ],
        series: [
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data1,
            gridIndex: 0,
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
              show: true,
              formatter: (p) => {
                // console.log(p)
                return `${p.value[2]} | ${p.value[3]}`
              },
              color: '#333'
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            }
          },
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data2,
            gridIndex: 1,
            xAxisIndex: 1,
            yAxisIndex: 1,
            label: {
              show: true,
              formatter: (p) => {
                return `${p.value[2]} | ${p.value[3]}`
              },
              color: '#333'
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff',
              color: '#E0EAFB'
            }
          },
          {
            name: 'Punch Card',
            type: 'heatmap',
            data: data3,
            gridIndex: 2,
            xAxisIndex: 2,
            yAxisIndex: 2,
            label: {
              show: true,
              formatter: (p) => {
                return `${p.value[2]} | ${p.value[3]}`
              },
              color: '#333'
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff',
              color: '#E0EAFB'
            }
          }
        ],
        backgroundColor: '#fff'
      }

      mycharts.setOption(option)
      window.addEventListener('resize', function () {
        mycharts.resize()
      })
    }
  }
}
</script>

<style scoped>
.pinghengbiao {
  width: 100%;
  height: 100%;
}

.balanceEcharts {
  width: 100%;
  height: 100%;
}
</style>
